<template>
  <div>
    <div v-show= '!this.$store.state.login && !this.$store.state.newLogin'>
        <div class="info-header">
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2035447233,1717815544&fm=27&gp=0.jpg" class="header-img">
          <div class="massage" @click="tologin">
            <p class="p1">立即登录</p>
            <p class="p2">登录后可享更多特权</p>
          </div>
        </div>
        <div class="info-middle" @click="tologin">
          <ul>
            <li class="bo">
              <div>
                <div>
                  <img src="../../../static/image/redpack.png">
                </div>
                <p>红包</p>
              </div>
            </li>
            <li>
              <div>
                <div>
                  <img src="../../../static/image/cond.png">
                </div>
                <p>金币</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="info-select">
          <div>
            <ul>
              <li @click="tologin">
                <img src="../../../static/image/address.png">
                <span>我的地址</span>
              </li>
              <li @click="tologin">
                <img src="../../../static/image/condshop.png">
                <span>金币商城</span>
              </li>
              <li>
                <img src="../../../static/image/share.png">
                <span>分享拿20元现金</span>
              </li>
              <li>
                <img src="../../../static/image/rule.png">
                <span>规则中心</span>
              </li>
            </ul>
          </div>
        </div>
    </div>
    <div v-show= 'this.$store.state.login'>
      <div class="info-header">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2035447233,1717815544&fm=27&gp=0.jpg" class="header-img">
        <div class="massage" @click="tologin">
          <p class="p1">用户1</p>
          <p class="p2">1567834621</p>
        </div>
      </div>
      <div class="info-middle">
        <ul class="islogin">
          <li class="bo">
            <div @click="toMoney">
              <div style="color:blue;line-height: 28px">
                <span>12.0</span>元
              </div>
              <p>钱包</p>
            </div>
          </li>
          <li class="bo" >
            <div @click="toredpack">
              <div style="color:brown;line-height: 28px">
                <span>3</span>个
              </div>
              <p>红包</p>
            </div>
          </li>
          <li >
            <div @click="tocoin">
              <div style="color:red;line-height: 28px">
                <span>1200</span>个
              </div>
              <p>金币</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="info-select">
        <div>
          <ul>
            <li @click="toAdderss">
              <img src="../../../static/image/address.png">
              <span>我的地址</span>
            </li>
            <li>
              <img src="../../../static/image/condshop.png">
              <span>金币商城</span>
            </li>
            <li>
              <img src="../../../static/image/share.png">
              <span>分享拿20元现金</span>
            </li>
            <li>
              <img src="../../../static/image/service.png">
              <span>客服中心</span>
            </li>
            <li>
              <img src="../../../static/image/rule.png">
              <span>规则中心</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-show= 'this.$store.state.newLogin'>
      <div class="info-header">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2035447233,1717815544&fm=27&gp=0.jpg" class="header-img">
        <div class="massage" @click="tologin">
          <p class="p1">用户2</p>
          <p class="p2">1567834621</p>
        </div>
      </div>
      <div class="info-middle">
        <ul class="islogin">
          <li class="bo">
            <div @click="toMoney">
              <div style="color:blue;line-height: 28px">
                <span>0.0</span>元
              </div>
              <p>钱包</p>
            </div>
          </li>
          <li class="bo" >
            <div @click="toredpack">
              <div style="color:brown;line-height: 28px">
                <span>5</span>个
              </div>
              <p>红包</p>
            </div>
          </li>
          <li >
            <div @click="tocoin">
              <div style="color:red;line-height: 28px">
                <span>0</span>个
              </div>
              <p>金币</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="info-select">
        <div>
          <ul>
            <li @click="toAdderss">
              <img src="../../../static/image/address.png">
              <span>我的地址</span>
            </li>
            <li>
              <img src="../../../static/image/condshop.png">
              <span>金币商城</span>
            </li>
            <li>
              <img src="../../../static/image/share.png">
              <span>分享拿20元现金</span>
            </li>
            <li>
              <img src="../../../static/image/service.png">
              <span>客服中心</span>
            </li>
            <li>
              <img src="../../../static/image/rule.png">
              <span>规则中心</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <tabber></tabber>
  </div>
</template>
<script>
    import Tabber from '../tabber/tabber'
    export default {
      components: {
        Tabber
      },
      methods: {
        tologin () {
          this.$router.push('/tologin')
        },
        toMoney () {
          this.$router.push('/money')
        },
        toredpack () {
          this.$router.push('/redpack')
        },
        tocoin () {
          this.$router.push('/coin')
        },
        toAdderss () {
          this.$router.push('/address')
        }
      }
    }
</script>
  
<style lang="stylus" type="text/stylus" >
     @import '../../common/stylus/mixin.styl'
  .info-header
    width :100%
    background-color :blue
    height :120px
    position :relative
    img
      display :inline-block
      width :80px
      height :80px
      border-radius :80px
      margin :20px
    .massage
      position :absolute
      display :inline-block
      line-height :30px
      color :white
      margin-top :40px
      .p1
        font-size :16px
      .p2
        font-size :12px
  .info-middle
    border-bottom :1px solid rgba(7,17,27,.1)
    ul
      list-style :none
      width :100%
      height :80px
      font-size :12px
      li
        margin-top :20px
        float :left
        width :50%
        text-align :center
      .bo
        border-right :1px solid rgba(7,17,27,.1)
        box-sizing :border-box
    .islogin
      font-size :12px
      li
        margin-top :20px
        float :left
        width :33.3%
        text-align :center
        span
          font-size :16px
  .info-select
    margin-top :10px
    ul
      list-style :none
      width :100%
      height :60px
      li
        line-height :60px
        position :relative
        border-bottom :1px solid rgba(7,17,27,.1)
        img
          margin-left :20px
          padding-top :5px
        span
          position :absolute
          top:-5px
          margin-left :10px




</style>
